<template>
	<div class="playerinformation">
		<el-form label-width="90px" class="searchform">
            <el-form-item label="预约单状态" prop="">
                <el-select v-model="serchForm.appType" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
            </el-form-item>
		  
		  <el-form-item label="请假日期">
			<el-col :span="11">
			<el-form-item prop="date1">
				<el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="serchForm.date" style="width: 200px;"></el-date-picker>
			</el-form-item>
			</el-col>
		</el-form-item>
			
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		
		  <el-table
		    :data="tableData"
		    border
			fit
			stripe=""
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }"
		    style="width: 100%">
			
		    <el-table-column
			type="index"
			align="center"
		      label="序号"
		    >
		    </el-table-column>
			<el-table-column
		      prop="id"
		      label="预约单编号"
		    >
		    </el-table-column>
			<el-table-column
		      prop="oldmanName"
		      label="老人名称"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="phone"
		      label="监护人联系电话"
		    >
		    </el-table-column>
			 <el-table-column
		      prop="date"
		      label="预约的时间"
		    >
		    </el-table-column>
            <el-table-column
		      prop="oldmanId"
		      label="老人编号"
		    >
		    </el-table-column>
		    <el-table-column
		      prop="type"
		      label="预约单状态"
		    >
		    </el-table-column>
		    
		    <el-table-column
		      fixed="right"
			  align="center"
		      label="操作"
		    >
		      <template slot-scope="scope">
                  <!-- 修改预约单的状态 -->
					<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                    <!-- 实际删除预约单 -->
					<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
				</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			:current-page="pageNum"
			@current-change="changePageNum"
			:total="pages">
			</el-pagination>
		  </div>

          <el-dialog title="修改信息" :visible.sync="dialogVisible2" width="500px">
				<el-form :model="editForm" :rules="rules" ref="editForm" label-width="150px" class="demo-ruleForm">
				<el-form-item label="老人名称" prop="name">
					<el-input v-model="editForm.oldmanName" disabled ></el-input>
				</el-form-item>
				<el-form-item  prop="id" v-if="false">
					<el-input v-model="editForm.id"></el-input>
				</el-form-item>
				<el-form-item label="回/来访者手机" prop="phone">
					<el-input v-model="editForm.phone" disabled></el-input>
				</el-form-item>
				<el-form-item label="老人编号" prop="oldmanId">
					 <el-select v-model="editForm.oldmanId" clearable="true" filterable placeholder="请输入老人名称以获取编号" :filter-method="selectOldmanName">
						<el-option
						v-for="item in oldmanNameOption"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="接待/回访" prop="type">
					<el-select v-model="editForm.type" placeholder="请选择">
						<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="来访时间" required>
					<el-col :span="11">
					<el-form-item prop="date1">
						<el-date-picker type="date" disabled value-format="yyyy-MM-dd" placeholder="选择日期" v-model="editForm.date" style="width: 200px;"></el-date-picker>
					</el-form-item>
					</el-col>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary" @click="updateForm('editForm')">确认修改</el-button>
					<el-button @click="resetForm('editForm')">重置</el-button>
				</el-form-item>
				</el-form>
		</el-dialog>


	</div>
</template>

<script>
import axios from 'axios'
import qs from 'querystring'
import { Message } from 'element-ui';
import { type } from 'os';
	export default{
		name:"VisitList",
		data(){
			return{
				// 添加老人的id。
				oldmanId : '',
				pageNum :1,
				// 当前的总页数，需要我们算出来的页数*10
				pages: 1,
				// 当前页。
				currentPage : 1,
				//每页的数量。
				pageSize : 5,
				//修改用户信息的表单
              
				editForm: {
						id : '',
						name: '',
						phone : '',
						date: '',
						positionId:'',
						oldmanId:'',
						type : ''
					},
				ruleForm: {
					name : '',
					phone : '',
					date : '',
					positionId :'',
					oldmanId :'',
					type : '',
        		},
				//老人名称查询。
				oldmanNameOption : [],
                // 预约单的一个状态。
				options: [
                    {
                        value : -1,
                        label : '请选择...'
                    },
                    {
					value: 0,
					    label: '管理员处理中'
					}, 
                    {
					value: 1,
					    label: '接待中'
					},
                    {
                        value : 2,
                        label : '待付款'
                    },
                    {
                        value : 3,
                        label : '已付款'
                    }
				],
                rules: {
					oldmanId: 
						{ required: true, message: '请输入老人姓名', trigger: 'blur' }
					,
					type : {required: true, message: '请选择状态', trigger: 'blur' }
                },
				value:"",
				name:"",
				nickname:"",
				uid:"",
				 tableData: [],
				//弹出添加表单
				dialogFormVisible: false,
				serchForm:{
					appType : -1,
					date : ''
				},
				form: {
					name: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				formLabelWidth: '120px',
				//弹出表单结束
				dialogVisible1: false,
				dialogVisible2: false,
				
				userdata:{
					name:'xxx',
					sex:'男'
				},
				editname:""
			}
		},
		//加载事件。
		mounted : function () {
			this.search();
		},
		methods:{
			// 点击分页数字后的事件。
			changePageNum : function(currentPage){
				this.currentPage = currentPage;
				this.search();
			},
			search : function () {
				var urls = this.$global.zuulIp + "/appointment/findAppointmentByPage";
				console.log(urls);
                console.log(this.serchForm.appType);
				this.$axios.get(urls,{params :{
					pages : this.currentPage,
					pageSize : this.pageSize,
					state : this.serchForm.appType,
					date : this.serchForm.date  == null ? "" : this.serchForm.date
				}}).then(res => {
					console.log(res.data);
					this.tableData = [];
					this.pages = res.data.pages * 10;
					for(var i = 0 ; i < res.data.list.length ; i ++){
						var data = res.data.list[i];
                        var type = '';
                        switch(data.state) {
                            case 0 : 
                                type = '管理员处理中...'
                                break
                            case 1 : 
                                type = '接待中...'
                                break
                            case 2:
                                type = '待付款'
                                break
                            case 3:
                                type = '已付款'
                                break
                        }
						var list = {
							id:data.id,
							oldmanName : data.oldmanName,
                            phone : data.phone,
                            date : data.date,
                            oldmanId : data.oldmanId , 
                            type : type
						}
						this.tableData.push(list);
					}
				})
			},
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			// 根据老人的名称，模糊查询6个老人出来，然后用户进行选择。
			selectOldmanName : function (oldmanName) {
				console.log(1);
				this.$axios.get(  this.$global.zuulIp +"/oldman/findOldmanNameByLike?name="+oldmanName).then(res => {
					console.log(res.data);
					this.oldmanNameOption = [];
					for(var i = 0 ; i < res.data.length ; i ++){
						var data = res.data[i]
						var list = {
							value : data.id,
							label : data.name
						}
						this.oldmanNameOption.push(list);
					}
				})
			},
			//删除
			del(row){
				let that = this;
				this.$confirm('此操作将永久删除该记录', '是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						var data = row.id;
						that.$axios.get(this.$global.zuulIp+"/appointment/dropAppointmentById?id="+data).then((response)=>{
							if(response.data>0){
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								that.search();
							}else{
								that.$message({
									type: 'error',
									message: '删除失败,请联系管理员!'
								});
							}
						}).catch((response)=>{
							console.log(response);
						})
					}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			},
			//修改
			edit(row){
				console.log(row);
				this.dialogVisible2 = true
				this.editForm.id = row.id
				this.editForm.oldmanName = row.oldmanName
				this.editForm.phone = row.phone
				this.editForm.positionId = row.positionId
				this.editForm.oldmanId = row.oldmanId
				this.editForm.date = row.date
				this.editForm.type = row.type
			},
			// 添加表单提交事件。
			updateForm(formName) {
				this.$refs[formName].validate((valid) => {
				if (valid) {
					var urls = this.$global.zuulIp+"/reception/modifyReception";
					this.$axios.post(urls, {
						id : this.editForm.id,
						visitorName : this.editForm.name,
						visitorPhone : this.editForm.phone,
						receiveDate : this.editForm.date,
						positionId : this.editForm.positionId,
						oldmanId :	this.editForm.oldmanId,
						type : this.editForm.type == '接待' ? 0 : 1
					}).then(res => {
						console.log(res);
						this.dialogVisible2 = false;
						this.search();
						Message.success('修改成功');
					})	
				} else {
					Message.error('修改失败！');
					return false;
				}
        	});
			},
			// 添加表单提交事件。
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				if (valid) {
					var urls = this.$global.zuulIp + "/reception/addReceptionOne";
					this.$axios.post(urls, {
						visitorName : this.ruleForm.name,
						visitorPhone : this.ruleForm.phone,
						receiveDate : this.ruleForm.date,
						positionId : this.ruleForm.positionId,
						oldmanId :	this.ruleForm.oldmanId,
						type : this.ruleForm.type
					}).then(res => {
						console.log(res);
						this.dialogFormVisible = false;
						this.search();
						Message.success('添加成功');
					})	
				} else {
					Message.error('添加失败！');
					return false;
				}
        	});
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
		}
	}
</script>

<style scoped="scoped">
	.searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>
